/* ANIMATIONS */
html, body {
  overflow: hidden;
}

.info.popup, .profile.popup {
  transition: all ease-in-out 0.25s;
}

.info.popup.hidden, .profile.popup.hidden {
  display: flex !important;
  filter: opacity(0);
  transform: translateX(calc(100% + 10px));
}

@media (max-width: 425px) {
  .info.popup.hidden, .profile.popup.hidden {
      transform: translate(calc(100% + 10px), -50%);
  }
}

.inventory.popup {
  transition: all ease-in-out 0.25s;
}

.inventory.popup.hidden {
  display: flex !important;
  filter: opacity(0);
  transform: translate(calc(-150% - 10px), -50%);
}

.leaderboard.popup, .settings.popup, .notifs.popup {
  transition: all ease-in-out 0.25s;
}

.leaderboard.popup.hidden, .settings.popup.hidden, .notifs.popup.hidden {
  display: flex !important;
  filter: opacity(0);
  transform: translate(-50%, calc(-50vh - 100%));
}

.attack-slider-wrp {
  transition: all ease-in-out 0.25s;
}

.attack-slider-wrp.hidden {
  display: flex !important;
  filter: opacity(0);
  transform: translateY(calc(25vh + 100%));
}

.layers-config.popup, .score.popup {
  visibility: visible;
  transition: visibility 0s, filter ease-in-out 0.25s;
}

.layers-config.popup.hidden, .score.popup.hidden {
  display: block !important;
  filter: opacity(0);
  visibility: hidden;
}